<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  <div id="mark"></div>
</body>
<!-- 引入 js 文件 -->
<!-- React 核心的交互代码 -->
<script src="./node_modules//react/umd/react.development.js"></script>
<!-- React dom 渲染的核心代码 -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 导入 Babel 插件，作用是将高版本的 JSX 语法进行低版本兼容 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- <script>
  // 创建 React 元素

  // 参数一 ： 元素名称     // 参数二 ： 元素属性     // 参数三 ： 元素的子节点

  const title = React.createElement('h1', null, 'Hello,React!');
  // 渲染 React 元素

  // 参数一 ： 要渲染的 React 元素     // 参数二 ： 挂载点

  ReactDOM.render(title, document.getElementById('root'))
</script> -->
<script type="text/babel">

  // 创建 React 元素

  // 参数一 ： 元素名称     // 参数二 ： 元素属性     // 参数三 ： 元素的子节点

  const title = React.createElement('h1', null, 'Hello,React!');
  // 渲染 React 元素

  // 参数一 ： 要渲染的 React 元素     // 参数二 ： 挂载点

  ReactDOM.render(title, document.getElementById('root'));

  // 定义变量存储数据
  let data = {title:"警告",msg:"！！！击攻ssx受遭在正站网前当"};
  

  function execRender(){
    // 使用 JSX 创建 react 元素
    const mark = <div>
                  <h1>{data.title}</h1>
                  <p>{data.msg.split('').reverse().join('')}</p>
                  <p>当前时间：{(new Date().toLocaleTimeString())}</p>
               </div>;
    //调用 ReacrtDOM 的render 方法执行DOM 结构渲染
    ReactDOM.render(mark,document.querySelector('#mark'));
  }

  // // 使用小括号包裹 JSX
  // const box = (
  //   <div>这是一段被小括号包裹的 div 标签</div>
  // )

  const timer = setInterval(function(){
    execRender();
  },1000);
</script>
/// 2354354324635悦u6553246354u61526435u54526435u65y4y54y
<!-- 这是遆大人添加的文字注释 -->
</html>